<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中华非遗 - 传承千年文化瑰宝</title>
    <link rel="stylesheet" href="styles/main.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <!-- 导航栏组件容器 -->
    <div id="navbar-container"></div>

    <!-- 主要内容区域 -->
    <main>
        <!-- 首页英雄区块 -->
        <section class="hero-section" id="heroSection">
            <!-- 第一阶段：清晰的广东非遗元素图 -->
            <div class="heritage-image-container" id="heritageImage">
                <div class="heritage-image">
                    <div class="heritage-elements">
                        <!-- 广东非遗元素装饰 -->
                        <div class="element element-1">
                            <i class="fas fa-dragon"></i>
                            <span>龙舟竞渡</span>
                        </div>
                        <div class="element element-2">
                            <i class="fas fa-cut"></i>
                            <span>剪纸艺术</span>
                        </div>
                        <div class="element element-3">
                            <i class="fas fa-theater-masks"></i>
                            <span>粤剧表演</span>
                        </div>
                        <div class="element element-4">
                            <i class="fas fa-palette"></i>
                            <span>象牙雕刻</span>
                        </div>
                        <div class="element element-5">
                            <i class="fas fa-mug-hot"></i>
                            <span>英德红茶</span>
                        </div>
                        <div class="element element-6">
                            <i class="fas fa-hand-rock"></i>
                            <span>雷州石狗</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 第二阶段：三缠绕图标和标语 -->
            <div class="interactive-content" id="interactiveContent">
                <!-- 三角形布局的三个功能区 -->
                <div class="triangle-layout">
                    <a href="about.html" class="function-circle-link">
                        <div class="function-circle circle-about" data-theme="about">
                            <div class="circle-icon">
                                <i class="fas fa-book-open"></i>
                            </div>
                            <div class="circle-content">
                                <h3>认识非遗</h3>
                                <p>搭建智慧桥梁，实现非遗与科学课堂双向奔赴，开启知识图谱教育新篇</p>
                            </div>
                        </div>
                    </a>
                    
                    <a href="explore.html" class="function-circle-link">
                        <div class="function-circle circle-explore" data-theme="explore">
                            <div class="circle-icon">
                                <i class="fas fa-search"></i>
                            </div>
                            <div class="circle-content">
                                <h3>走近非遗</h3>
                                <p>对标优秀案例，启动多模态AI灵感引擎，智启科学课堂新想象</p>
                            </div>
                        </div>
                    </a>
                    
                    <a href="heritage.html" class="function-circle-link">
                        <div class="function-circle circle-heritage" data-theme="heritage">
                            <div class="circle-icon">
                                <i class="fas fa-graduation-cap"></i>
                            </div>
                            <div class="circle-content">
                                <h3>传习非遗</h3>
                                <p>打造实践熔炉，借跨学科项目发力，凭虚拟实验室赋能，淬炼文化自信璀璨结晶</p>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </section>


    </main>

    <!-- 页面底部 -->
    <footer class="main-footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <h4>关于我们</h4>
                    <p>致力于保护和传承中华民族非物质文化遗产</p>
                </div>
                <div class="footer-section">
                    <h4>快速链接</h4>
                    <ul>
                        <li><a href="about.html">认识非遗</a></li>
                        <li><a href="explore.html">走近非遗</a></li>
                        <li><a href="heritage.html">传习非遗</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h4>联系我们</h4>
                    <p>邮箱: info@heritage.cn</p>
                    <p>电话: 010-12345678</p>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2024 中华非遗. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <!-- AI对话按钮 -->
    <button class="ai-chat-button" id="aiChatButton" title="AI助手">
        <i class="fas fa-robot"></i>
    </button>

    <!-- AI对话弹窗 -->
    <div class="ai-chat-modal" id="aiChatModal">
        <div class="ai-chat-window">
            <!-- 对话窗口头部 -->
            <div class="ai-chat-header">
                <div class="ai-chat-title">
                    <i class="fas fa-robot"></i>
                    <span>非遗索思AI助手</span>
                </div>
                <button class="ai-chat-close" title="关闭">
                    <i class="fas fa-times"></i>
                </button>
            </div>

            <!-- 对话消息区域 -->
            <div class="ai-chat-messages">
                <!-- 消息将通过JavaScript动态添加 -->
            </div>

            <!-- 输入区域 -->
            <div class="ai-chat-input-area">
                <textarea 
                    class="ai-chat-input" 
                    id="chatInput" 
                    placeholder="请输入您想了解的非遗问题..."
                    rows="1"
                ></textarea>
                <button class="ai-chat-send" id="chatSend" title="发送">
                    <i class="fas fa-paper-plane"></i>
                </button>
            </div>
        </div>
    </div>

    <!-- JavaScript脚本 -->
    <script src="scripts/main.js"></script>
    <script src="scripts/ai-chat-final.js"></script>
    <script src="scripts/navbar-component.js"></script>
    <script>
        // 初始化导航栏并设置当前页面
        initNavbar();
        setActiveNavPage('index.html');
    </script>
</body>
</html> 